<template>
    <page-meta :page-style="'overflow:' + (scrollShow ? 'hidden' : 'visible')"> </page-meta>
    <view class="detail" v-if="show">
        <view class="detail-line">
            <view class="detail-left">审核状态</view>
            <view class="detail-right detail-status">
                <view>{{ detail.auditStatusName }}</view>
                <image
                    v-if="detail.auditStatus == 4"
                    :src="getImgOssUrl('/ui-prod-2.11.0/error.png')"
                    class="detail-icon"
                    @click="open"></image>
            </view>
        </view>
        <view class="detail-line">
            <view class="detail-left">提现金额（元）</view>
            <view class="detail-right detail-red">{{ floatDivide(detail.amount, 100) }}</view>
        </view>
        <view class="detail-line">
            <view class="detail-left">提现至</view>
            <view class="detail-right">
                {{ detail.withdrawTo == 1 ? '微信' : `${detail.bankName}（****${detail.bankAccountNoTail}）` }}
            </view>
        </view>
        <view class="detail-line">
            <view class="detail-left">申请时间</view>
            <view class="detail-right">{{ detail.createdAt }}</view>
        </view>
        <view class="detail-line" v-if="detail.auditStatus != 1">
            <!-- 若提现状态为“提现中”，不显示审核时间 -->
            <view class="detail-left">审核时间</view>
            <view class="detail-right">{{ detail.auditAt }}</view>
        </view>
        <popup ref="wechatRef" @closed="scrollShow = false">
            <template #content>
                <view class="detail-reason">拒绝原因</view>
                <view class="detail-alert">{{ detail.rejectReason }}</view>
            </template>
        </popup>
    </view>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { getImgOssUrl, floatDivide } from '@/commons/utils';
import request from '@/request';
import popup from '../components/popup.vue';
const wechatRef = ref();
const props = defineProps(['id']);
const detail = reactive({});
let show = ref(false);
let scrollShow = ref(false);
const getDetail = async () => {
    let res = await request('withdrawDetail', { id: props.id });
    Object.assign(detail, res.data);
    show.value = true;
};
const open = () => {
    scrollShow.value = true;
    wechatRef.value.openPopup();
};
onShow(() => {
    getDetail();
});
</script>
<style lang="scss" scoped>
.detail {
    height: 100vh;
    padding: 29rpx;
    box-sizing: border-box;
    background-color: #fff;
    .detail-reason {
        font-size: 29rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #33302d;
        line-height: 31rpx;
        margin-bottom: 29rpx;
        text-align: center;
    }
    .detail-alert {
        font-size: 25rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        height: 136rpx;
        overflow: auto;
        color: #666666;
        line-height: 36rpx;
        padding: 0 63rpx;
        text-align: center;
        word-break: break-all;
    }
    .detail-line {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 36rpx;
        .detail-left {
            font-size: 29rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 40rpx;
        }
        .detail-status {
            display: flex;
            align-items: center;
        }
        .detail-right {
            font-size: 29rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 40rpx;

            .detail-icon {
                margin-left: 7rpx;
                width: 29rpx;
                height: 31rpx;
            }
        }
        .detail-red {
            color: #fe292b !important;
        }
    }
}
</style>
